<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>productList</title>
    <script type="text/javascript" src="js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="js/myajax.js"></script>
</head>
<body>
    <div id="app">
        <my-table></my-table>
    </div>

    <template id="mytable-form">
        <div>
            <h1>welcome</h1>
            <button>添加</button>
        <table border="1px">
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>author</th>
                <th>price</th>
                <th>stock</th>
                <th>operation</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="b in books" :key="b.bookId">
                <td>{{b.bookId}}</td>
                <td>{{b.bookName}}</td>
                <td>{{b.author}}</td>
                <td>{{b.price}}</td>
                <td>{{b.stock}}</td>
                <td>
                    <button @click="removeBook(b.bookId)">删除</button>
                    <button>更新</button>
                </td>
            </tr>
            </tbody>
        </table>
        <p>
            <a href="" v-for="page in pages" :key="page" @click.prevent="handelClick(page)"><button>哪去了{{page}}</button></a>
        </p>
        </div>
    </template>

    <template id="add-form">
        <form action="" @submit.prevent="addBook">
            图书名: <input type="text" v-model="b.bookName" id=""> <br>
            作者： <input type="text" v-model="b.author" id=""> <br>
            价格: <input type="number" v-model="b.price" id=""> <br>
            库存: <input type="number" v-model="b.stock" id=""> <br>
            <input type="submit" value="添加">
        </form>
    </template>


    <script>

        const addForm = {
            template:"#add-form",
            data:function(){
                return {
                    b:{}
                }
            },
            methods:{
                addBook(){
                    let url = "";
                    let data = "";
                }
            }
        }

        const myTable = {
            template:"#mytable-form",
            data:function(){
                return {
                    books:[],
                    pages:[]
                }
            },
            created(){
                let url="/test/book/show";
                let data="pageNum=1&pageSize=5";
                let type="post";
                myAjax(url,data,type,(result)=>{
                    // let ss = result.split(":");
                    // let data = ss[0];
                    // let pages = Number.parseInt(ss[1]);
                    // this.books=[];
                    // this.pages=[];
                    // let booksStr = data.split(",");
                    // for(let i = 0; i < booksStr.length; i++){
                    //     let bookStr = booksStr[i].split("&");
                    //     let bookObj = {};
                    //     for(let j = 0; j < bookStr.length; j++){
                    //         let bookProps = bookStr[j].split("=");
                    //         bookObj[bookProps[0]] = bookProps[1];
                    //     }
                    //     this.books.push(bookObj);
                    // }
                    // for(let n = 1; n <= pages; n++){
                    //     this.pages.push(n);
                    // }
                    let newData = JSON.parse(result);
                    this.books = newData.books;
                    this.pages = newData.pages;

                })
            },
            methods:{
                handelClick(i){
                    let url="/test/book/show";
                    let data="pageNum="+i+"&pageSize=5";
                    let type="post";
                    myAjax(url,data,type,(result)=>{
                        // let ss = result.split(":");
                        // let data = ss[0];
                        // let pages = Number.parseInt(ss[1]);
                        // this.books=[];
                        // this.pages=[];
                        // let booksStr = data.split(",");
                        // for(let i = 0; i < booksStr.length; i++){
                        //     let bookStr = booksStr[i].split("&");
                        //     let bookObj = {};
                        //     for(let j = 0; j < bookStr.length; j++){
                        //         let bookProps = bookStr[j].split("=");
                        //         bookObj[bookProps[0]] = bookProps[1];
                        //     }
                        //     this.books.push(bookObj);
                        // }
                        // console.log("1");
                        // for(let n = 1; n <= pages; n++){
                        //     this.pages.push(n);
                        // }
                        let newData = JSON.parse(result);
                        this.books = newData.books;
                        this.pages = newData.pages;
                    });
                },
                removeBook: function (bookId) {
                    let isDelete = confirm("确定删除吗?");
                    if(!isDelete){
                        return ;
                    }
                    let url = "/test/book/deleteById";
                    let data = "bookId=" + bookId;
                    let type = "get";

                    myAjax(url, data, type, (result) => {
                        let responseData = JSON.parse(result);
                        console.log(responseData);
                        if (responseData.status == "success") {
                            alert("删除成功");
                            this.handleClick(1);
                        }else{
                            alert("删除失败");
                        }
                    })
                }
            }
        }

        const vm = new Vue({
            el:"#app",
            components:{
                myTable
            }
        })

    </script>


</body>
</html>